<template>
	<el-card>
		<el-input type="text" style="width: 430px;" v-model="student_number" placeholder="请输入学号"></el-input>
		<el-button type="primary" @click="saveAnswer(Answer)">提交</el-button>
		<div>
			<span style="width: 500px;" name="title" type="text" class="form-control" >{{Form.headline}}</span>
		</div>
		<div v-show="list.length != 0">
			<div class="well-box mt-1 text-left" :class="'questionnaire_'+index" v-for="(item, index) in list" :key="index">
				
				<div class="flex-row">
					<div style="width: 50px;padding:5px 10px;font-size: 14px">
						{{ index + 1 }}
					</div>
					<div class="flex-1">
						<span>{{item.questionContent}}</span>
						<div>
							<!-- 判断为单选题型 -->
							<div v-if="'singleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
								<input type="radio" :name='"optionschoice["+index+"]"':value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
								<span>{{item.options[i].optionContent}}</span>
							</div>
							<!-- 判断为单选题型 end -->
		
							<!-- 判断为多选题型 -->
							<div v-if="'mutipleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
								<input type="checkbox" name="options" :value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
								<span>{{item.options[i].optionContent}}</span>
							</div>
							<!-- 判断为多选题型 end -->
		
							<!-- 判断为简答题型 -->
							<div v-if="'scoring' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
								<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.options[i].optionContent"/>
							</div>
					    </div>
				    </div>
				</div>
			</div>
		</div>
	</el-card>
</template>

<script>
	export default {
		name: 'FormList',
	
		created() {
			var formId
			formId=this.$route.params.id
			console.log(formId);
			this.handleSee(formId)
		},
	
		data() {
			return {
				student_number:"",
				FormList: [],
				textarea: [],
				list: [],
				Form: {
					headline: '',
					formId:'',
					startDate: '',
					endDate:'',
					sList: [],
				},
				Answer:[],
			}
		},
		methods: {
			async formList() {
				const {
					data: res
				} = await this.$http.get('getForms', this.FormList)
				//console.log(this.FormList)
				//console.log(res)
				this.FormList = res;
				//console.log(this.FormList[0].headline);						  
			},
			
			    getRadioVal (value,type,id) {
			        console.log(value);
					console.log(type);
					console.log(id);
					if (type == 'singleChoice') {
						for(let i=0;i<this.Answer.length;i++)
						{
							console.log(this.Answer[i]);
							if(this.Answer[i].question_id==id){
								var singleChoice = {
									answerContent:value,
									formId:this.Form.formId,
									question_id:id,
									studentId:this.student_number,
								}
								this.Answer[i]=singleChoice
								return null;
							}
						}
							var singleChoice = {
								answerContent:value,
								formId:this.Form.formId,
								question_id:id,
								studentId:this.student_number,
							}
							this.Answer.push(singleChoice)

					}

					else if (type == 'mutipleChoice') {
						var mutipleChoice = {
							answerContent:value,
							formId:this.Form.formId,
							question_id:id,
							studentId:this.student_number,
					}
						this.Answer.push(mutipleChoice)
					}
						
									

					/* else if (type == 'scoring') {
						var scoring = {
							form_id:this.Form.formId,
							student_id:this.student_number,
							answer_content:value,
						}
					} */
			    },
				getYMDHMS (timestamp) {
				      let time = new Date(timestamp)
				      let year = time.getFullYear()
				      let month = time.getMonth() + 1
				      let date = time.getDate()
				      let hours = time.getHours()
				      let minute = time.getMinutes()
				      let second = time.getSeconds()
				
				      if (month < 10) { month = '0' + month }
				      if (date < 10) { date = '0' + date }
				      if (hours < 10) { hours = '0' + hours }
				      if (minute < 10) { minute = '0' + minute }
				      if (second < 10) { second = '0' + second }
				      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
				},
			async saveAnswer(Answer) {
				console.log(Answer);
				var date = new Date();
				this.getYMDHMS(date);
				var datetime=this.getYMDHMS(date);
				if(datetime>=this.Form.endDate){
					this.$alert('表单已停止提交', '抱歉!', {
					          confirmButtonText: '确定',
					          callback: action => {
					            this.$message({
					              type: 'info',
					              message: `action: ${ action }`
					            });
					          }
					        });
				}
				else{
				const {
					data: res
				} = await this.$http.post('saveAnswer',Answer)
				this.$router.push('/FormList')
				}
			},
			async handleSee(formId) {
				console.log(formId);
				const {
					data: res
				} = await this.$http.get('getFormById?id=' + formId)
				this.Form = res;
				console.log(this.Form.endDate);
				var date = new Date();
				console.log(date);
				var datetime=this.getYMDHMS(date);
				console.log(datetime);
				if(datetime>=this.Form.endDate){
					this.$alert('表单已停止提交', '抱歉!', {
					          confirmButtonText: '确定',
					          callback: action => {
					            this.$message({
					              type: 'info',
					              message: `action: ${ action }`
					            });
					          }
					        });
				}
				else{
				for (let i = 0; i < res.sList.length; i++) {
					//console.log(res.sList[i].type);
					this.addQuestionnaire(res.sList[i].type)
					//console.log(res.sList[i].type);
				}
				this.list=this.Form.sList;
				}
			},
				addQuestionnaire(type, index, operation) {
							// 添加单选题
							if (type == 'singleChoice') {
								var singleChoice = {
									questionContent:'',
									
									options: [{
										optionContent:'选项1'
									}],
									type: 'singleChoice',
									sort: this.list.length + 1
								}
							}
							// 添加多选题
							else if (type == 'mutipleChoice') {
								var mutipleChoice = {
									questionContent: '',
									options: [{
										optionContent: "选项1"
									}, {
										optionContent: "选项2"
									}],
									type: 'mutipleChoice',
									sort: this.list.length + 1
								}
							}
								
				
							// 添加简答题
							else if (type == 'scoring') {
								var scoring = {
									questionContent: '',
									options: [{
										optionContent: ""
									}],
									type: 'scoring',
									sort: this.list.length + 1
								}
							}
				
							// 添加简答题 end
				
						},
					},
			}
</script>

<style>
	[v-cloak] {
		display: none;
	}
	
	body {
		margin: 0;
	}
	
	.flex-row {
		display: flex;
	}
	
	.flex-column {
		flex-direction: column;
	}
	
	.flex-1 {
		flex: 1;
	}
	
	.flex-middle {
		align-items: center;
	}
	
	.flex-align-items-center {
		align-items: center;
	}
	
	.flex-justify {
		justify-content: space-between;
	}
	
	.flex-wrap {
		flex-wrap: wrap;
	}
	
	.flex-center {
		justify-content: center;
	}
	
	.mt-3 {
		margin-top: 30px !important;
	}
	
	.mt-1 {
		margin-top: 10px !important;
	}
	
	.well-box {
		background: #fff;
		padding: 15px;
		min-height: 150px;
	}
	
	.content .content-box {
		padding: 15px;
		background-color: #fff;
		margin-bottom: 15px;
	}
	
	.block {
		display: block !important;
	}
	
	.relative {
		position: relative;
	}
	
	.pointer {
		cursor: pointer;
		margin: 5px;
	}
	
	.notopmargin {
		margin-top: 0 !important;
	}
	
	.f14 {
		font-size: 14px;
	}
	
	.f18 {
		font-size: 18px;
	}
	
	.f28 {
		font-size: 28px;
	}
	
	.btn {
		border: none;
		padding: 10px 25px;
	}
	
	.btn-bgWhite {
		border: 1px solid #999999;
		background: #fff;
		border-radius: 2px;
	}
	
	.btn-bgWhite:hover,
	.btn-bgBlue:hover,
	.btn-bgYello:hover {
		background: #333;
		color: #fff;
	}
	
	.btn-bgBlue {
		background: #3582f8;
		border-radius: 2px;
		color: #fff;
	}
	
	.btn-bgYello {
		background: #e7a42f;
		border-radius: 2px;
		color: #fff;
	}
	
	.text-right {
		text-align: right;
	}
	
	.text-left {
		text-align: left;
	}
	
	.form-control {
		/* height: 40px; */
		background: #ffffff;
		border: 1px solid #d8d8d8;
		border-radius: 3px;
		box-shadow: none;
		margin: 15px;
		padding: 5px;
	}
	
	input:focus {
		outline: none;
	}
	
	.input-group-fan .form-control {
		margin: 0;
		padding: 10px 15px;
	}
	
	.input-group-fan select {
		display: block;
		height: 40px;
		width: 330px;
		border: 1px solid #d8d8d8;
		padding: 0 10px;
		border-radius: 3px;
	}
	
	.input-group-fan select option {
		padding: 5px;
	}
	
	.input-group-fan label {
		font-size: 14px;
		color: #333333;
	}
	
	.input-group-fan {
		margin: 15px 0;
		width: 100%;
	}
	
	.input-group-fan input {
		float: none !important;
		width: 500px !important;
		display: block !important;
	}
	
	.questionnaire_null {
		height: 500px;
		border: 1px dashed #3582f8;
		border-radius: 3px;
		margin-top: 30px;
		font-size: 18px;
		color: #000000;
	}
	
	.btn-event {
		display: inline-block;
		width: 50px;
		margin: 15px;
		cursor: pointer;
	}
	
	.input-border {
		border: 1px dashed #eee;
		margin-bottom: 10px !important;
		padding: 5px;
		width: 500px;
	}
	
	.icon_score {
		color: #d8d8d8;
		font-size: 28px !important;
		margin-right: 15px;
	}
</style>
